<template>

<div id="app">
  <div class="big">
      <div class="banner"></div>
        <div class="mima">
            <div class="phone">
                <input type="text" placeholder="请输入手机号" id="userName" v-model="userName">
                <img src="../assets/img/教育APP切图/登录注册/手机@2x.png" alt="" class="mm">
            </div>
            <div class="phone">
                <input :type="type" placeholder="请输入密码" id="passWord" value="qaz123" v-model="passWord">
                <img src="../assets/img/教育APP切图/登录注册/密码@2x.png" alt="" class="mm">
                <img src="../assets/img/教育APP切图/登录注册/眼睛@2x.png" alt="" class="eyec" v-show="close" @click='fn'>
                <img src="../assets/img/教育APP切图/登录注册/眼睛-开@2x.png" alt="" class="eyeo" v-show="!close" @click="fn1">
            </div>
            <a href="">忘记密码</a>
        </div>
        <button class="dl" @click='cli'>立即登录</button>
        <p class="zc"><span>还没有账号？</span><router-link to="/myRegister" tag="a">立即注册></router-link> </p>
        <div class="wb">
            <a href=""><img src="../assets/img/教育APP切图/登录注册/QQ@2x.png" alt=""></a>
            <a href=""><img src="../assets/img/教育APP切图/登录注册/微信@2x.png" alt=""></a>
            <a href=""><img src="../assets/img/教育APP切图/登录注册/微博@2x.png" alt=""></a>
        </div>
        <!-- <div class="success">
            登录成功，请稍等...
        </div> -->
        <my-tip :text='text' v-show="$store.state.flag">
        
        </my-tip>
  </div>
  </div>
</template>

<script>
import {login} from '@/api/myLogin'
import myTip from '@/components/myTip.vue'
export default {
  name: 'myLogin',
  data() {
      return {
          userName:'jandy',
          passWord:'qaz123',
          text:'',
          flag:0,
          close:true,
      }
  },
  components: {
      myTip
  },
  computed:{
      type(){
          return this.close?"password":"text"
      }
  },
   methods: {

    fn(){
        this.close=0
    },
    fn1(){
        this.close=1
    },
      cli(){
        login({
            userName:this.userName,
            password:this.passWord
            }).then(res=>{
                   this.$store.state.flag=1
                if (res.success==='登录成功') {
                console.log(res.success);
                    this.text=res.success+'...';
                    sessionStorage.setItem('user',JSON.stringify(res.data))
                    this.$store.state.user=res.data
                    // this.$store.commit('setUser',res.data)
                    setTimeout(() => {
                        this.$router.push({
                        path:'/myIndex',
                        name:'首页'
                    }),
                    this.$store.state.flag=0
                    }, 2000);
                }else{
                    this.text=res.err;
                }
            }).catch(err=>{
                this.$store.state.flag=1
                console.log(err);
                // this.text=err.err
            })
            }
      },
}
</script>
<style lang="scss" scoped>
.big {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    height: 100vh;


.banner {
    width: 100%;
    height: 58rem;
    background-image: url(../assets/img/教育APP切图/登录注册/登录注册_01.png);
    background-size: 100% 58rem;
}

.mima {
    width: 100%;
    height: 33.2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: flex-end;
    padding: 0 9rem;
}

.phone {
    position: relative;
    input {
        width: 57.2rem;
        height: 6.5rem;
        border-bottom: 0.1rem solid #ccc;
        padding-left: 5rem;
        font-size: 3rem;
    }
}

.mima a {
    color: #5064eb;
    border-bottom: 0.1rem solid #5064eb;
    font-size: 2rem;
}

.mm {
    position: absolute;
    left: 0;
    top: 1rem;
    width: 2.8rem;
    height: 3.2rem;
}

.eyeo,
.eyec {
    position: absolute;
    top: 1rem;
    right: 4rem;
    width: 3.2rem;
    height: 1.8rem;
}

// .eyeo {
//     display: none;
// }

.zc {
    height: 10rem;
    line-height: 10rem;
    font-size: 2.6rem;
    a {
        color: #145aee;
    }
}

button {
    width: 63rem;
    height: 8.8rem;
    background: #5064eb;
    border-radius: 5rem;
    color: #fff;
    font-size: 3rem;
}

.wb {
    width: 43.5rem;
    height: 18.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    img {
        width: 5.6rem;
        height: 5.6rem;
    }
}

// .success {
//     position: fixed;
//     width: 56rem;
//     height: 10rem;
//     font-size: 3rem;
//     text-align: center;
//     line-height: 10rem;
//     border-radius: 5rem;
//     background: #fff;
//     top: 5rem;
// }
}
</style>